<div class="comment-list">
  <ng-container *ngFor="let comment of commentList()">
    <div class="card-comment">
      <div class="card-body">
        <p>
          {{ comment.body }}
        </p>
      </div>
      <div class="card-footer">
        <img alt="avatar" [src]="comment.author.image" class="avatar" />
        <a class="author" [routerLink]="['/@' + comment.author.username]">{{
          comment.author.username
        }}</a>
        <p class="date">{{ comment.createdAt | date : "MMMM d, y" }}</p>
        <a
          class="delete-btn"
          *ngIf="currentUser()?.username === comment.author.username"
          (click)="onDeleteComment(comment.id)"
          ><i class="fa-solid fa-trash"></i
        ></a>
      </div>
    </div>
  </ng-container>
</div>
